<template>
  <div class="equipment-alarm">
      <el-form 
      class="form-container" 
      label-width="90px" 
      :size="size" 
      :model="form"
      label-position="left" 
      ref="form">
      <el-row>
          <el-col :span="6">
              <el-form-item label="行政区域:" prop="code">
                  <el-input 
                      style="width: 90%"
                      v-model="form.code"
                      placeholder="请输入"
                      clearable>
                  </el-input>
              </el-form-item>
          </el-col>
          <el-col :span="7">
              <el-form-item label="监测点名称:" prop="name">
                  <el-input 
                      style="width: 90%"
                      v-model="form.name"
                      placeholder="请输入"
                      clearable>
                  </el-input>
              </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="时间范围:" prop="time">
                    <el-date-picker
                        v-model="form.time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        style="width: 90%">
                    </el-date-picker>
                </el-form-item>
          </el-col>
          <el-col :span="2">
              <el-button :size="size" type="primary" @click="onSearch">查询</el-button>
          </el-col>
      </el-row>
  </el-form>
      <el-table
          :data="tableData"
          :header-row-style="{ background: '#f2f2f2' }"
          id="table"
          :height="tableHeight || '280px'"
          border
          style="width: 100%;"
          size="small">
          <el-table-column
              v-for="item in tableHeaderColumn"
              :prop="item.prop"
              :label="item.label"
              :width="item.width">
          </el-table-column>
      </el-table>
      <el-pagination
          layout="prev, pager, next, total"
          :total="1000">
      </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'equipment-alarm',
  props: {
      tableHeight: {
          type: Number,
          default: 350
      }
  },

  created() {
      
  },

  data() {
      return {
          size: 'mini',
          form: {
              code: '',
              named: ''
          },
          tableHeaderColumn: [
              { label: '序号', prop: 'sn', width: 50 },
              { label: '监测点编码', prop: 'code' },
              { label: '监测点名称', prop: 'name'},
              { label: '异常类型', prop: 'time'},
              { label: '监测时间', prop: 'voltage' },
              { label: '入库时间', prop: 'voltageAlarm' },
              { label: '数据类型', prop: 'powerWorkStatus', width: 100},
              { label: '具体值', prop: 'terminalAlarm', width: 100},
          ],
          tableData: [
              {sn: 1},
              {sn: 2},
              {sn: 3},
              {sn: 4 },
              {sn: 5},
              {sn: 6},
              {sn: 7},
              {sn: 8},
              {sn: 9},
              {sn: 10},
              {sn: 11},
              {sn: 12},
          ],
          
      };
  },

  methods: {
      onSearch() {
          
      }
  }
};
</script>

<style lang="scss" scoped>
// #6edef1
  .equipment-alarm {
      padding: 15px;
      :deep{
          .el-input__inner {
              background-color: rgba(110, 224, 241, 0);
              border: 1px solid rgba(110, 224, 241, 1);
              border-radius: 15px;
              padding-right: 10px;
              font-size: 14px;
          }

          .el-table__body {
              .el-table__cell {
                  padding: 5px 0;
              }
          }

          .el-table--border::after, .el-table--group::after, .el-table::before {
              background-color: rgba(110, 224, 241, 0.4);
          }

          .el-table thead tr th {
              background: #f0f0f0;
          }

          .el-table thead{
              color: rgba(0, 0, 0, 0.65);
              font-size: 12px;     
          }

          
          .el-table--border th.el-table__cell.gutter:last-of-type {
              border: none;
          }

          .el-button--mini {
              padding: 6px 10px;
          }
          .el-range-input {
            background: transparent !important;
          }

      }
      .el-pagination {
          display: flex;
          justify-content: center;
          margin-top: 10px;
          :deep {
              button {
                  background: rgba(0, 0, 0, 0);
              }
              .btn-prev, .btn-next {
                  background: rgba(0, 0, 0, 0);
                  color: #02A7F0;
              }
              .el-pager li {
                  background: rgba(0, 0, 0, 0);
                  color: #333;
                  font-size: 12px;
              }
              .el-pager li.active {
                  color: #1890ff;
              }
              .el-pager li:hover {
                  color: #1890ff;
              }

              button:disabled {
                  color: #c0c4cc;
              }
              
          }
      }
  }

  
  
</style>